<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <?php echo vtnsSlot::renderCategoryMenu($current_category->id); ?>
        </div>
        <div class="span9">
            <div class="row-fluid">
                <h3 class="title"><? echo $product->name ?></h3>
                <div class="row-fluid">
                    <div class="span6">
                        <div class="product_images">
                            <?php $images = json_decode(html_entity_decode($product->images), true)?>
                            <div class="product_images_main">
                                <?php foreach ($images['list'] as $img) : ?>
                                    <img src="<?php echo $img?>" />
                                <?php endforeach; ?>
                            </div>
                            <div class="product_images_wrapper">
                                <span class="img_product_item">
                                    <?php foreach ($images['list'] as $img) : ?>
                                        <img src="<?php echo $img?>" />
                                    <?php endforeach; ?>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="product_details">
                            <div>
                                <b><?php echo __("Original Price")?>: </b> <span style="text-decoration:line-through"><?php echo $product->original_price ?> $</span>
                            </div>
                            <div>
                                <b><?php echo __("Discount Price")?>: <span style="color:#f00; font-size:20px;"><?php echo $product->discount_price ?> $</span> </b>
                            </div>
                            <div>
                                <b><?php echo __("Detail")?>: </b> <a href="<?php echo $product->detail_link ?>">link</a>
                            </div>
                            <?php if (isset($options)) : ?>
                            <table style="width:100%;" class="table marginT10">
                            	<?php foreach ($options as $option) : ?>
                            	<tr rel="<?php echo $option['id'] ?>">
                                	<td style="width:21px;">
                                    	<input type="radio" name="rad_option" id="rad_option_<?php echo $option['id']?>" class="rad_option" <?php echo ($option['available'] > 0)?"":"disabled"?> value="<?php echo $option['id']?>" />
                                    </td>
                                    <td style="width:209px; text-align:left;">
                                    	<label class="form-label <?php echo ($option['available'] > 0)?"":"disabled"?>" for="rad_option_<?php echo $option['id']?>"><?php echo $option['name']?></label>
                                    </td>
                                    <td>
                                    	<button class="btnCheck btn btn-small <?php echo ($option['available'] > 0)?"btn-info":"btn-danger disabled"?>"><?php echo ($option['available'] > 0)?"Check":"Sold out"?></button>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </table>
                            <?php endif; ?>
                            
                            <div class="marginT10" id="quantity">
                            	<select id="sbo_quantity">
                                	<?php for ($quantity=0; $quantity<=4; $quantity++) { ?>
                                    <option value="<?php echo $quantity?>"><?php echo $quantity ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                            
                            <div class="marginT10">
                                <div>
                                    <button id="btnAdd" class="btn btn-warning disabled" onclick="addToCart()"><?php echo __("Add to cart")?></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="marginT20">
                    <h3 class="title"><?php echo __("Description")?></h3>
                    <p>
                        <?php echo $product->description ?>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
	$(document).ready(function()
	{
		$(".img_product_item").hover(function()
		{
			var src = $(this).find('img').attr("src");
			$(".product_images_main img").attr("src", src);
		});
		
		$("#sbo_quantity").live("change",function()
		{
			if ($("#sbo_quantity").val() > 0)
				$("#btnAdd").removeClass("disabled");
			else
				$("#btnAdd").addClass("disabled");
		});
		
		$(".btnCheck").live('click', function()
		{
			$(this).parent().parent().find(".rad_option").click();
			$(this).parent().parent().find(".rad_option").parent().addClass("checked");
		});
		$(".rad_option").live('change', function()
		{
			option = $(this).val();
			checkQuantity(option);
		});
	});
	
	function checkQuantity(option)
	{
		var product_id = <?php echo $product->id ?>;
		$.post("<?php echo url_for("@product_check?")?>", {option_id: option, product_id: product_id}, function(data) {
			if (data == '0') {
				$("tr[rel="+option+"] .btnCheck").html("Sold out");
				$("#sbo_quantity").html("<option value='0'>0</option>");
				$("#sbo_quantity").parent().find("span:first").html("0");
				$("#btnAdd").addClass("disabled");
			} else {
				$("tr[rel="+option+"] .btnCheck").html("Available");
				$("tr[rel="+option+"] .btnCheck").removeClass("btn-info");
				$("tr[rel="+option+"] .btnCheck").addClass("btn-success");
				$("#sbo_quantity").html(data);
				$("#sbo_quantity option[value=1]").attr("selected", "selected");
				$("#sbo_quantity").parent().find("span:first").html("1");
				$("#btnAdd").removeClass("disabled");
			}
			$("tr[rel="+option+"] .btnCheck").addClass("disabled");
		});
	}
	
	function addToCart()
	{
		var product_id = <?php echo $product->id ?>;
		var quantity = $("#sbo_quantity").val();
		var option_id = $(".radio .checked .rad_option").val();
		
		$.post("<?php echo url_for("@cart_add")?>", {product_id: product_id, option_id: option_id, quantity: quantity}, function(data) {
			$.pnotify({
				type: 'success',
			    title: 'Add to cart',
	    		text: '<?php echo __("Added this product to cart success!!!")?>',
			    icon: 'picon icon16 brocco-icon-info white',
			    opacity: 0.9,
			    history: false,
			    sticker: false
			});
			$("#link_to_cart").html(data);
		});
		
	}
</script>

<style>
	.table .radio {
		margin:4px 0 0 0;
	}
	.table .form-label {
		line-height:26px;
		cursor:pointer;
	}
	.table .form-label:hover {
		color:#08c;
	}
	.table input.disabled {
		cursor:default;
	}
	.table input.disabled:hover {
		color:#000;
	}
</style>